<template>
    <!--答题考试记录详情信息页面-->
    <view class="answerDetails flex flex-column">
      <view class="list-view" :class="{ 'is-btn': from === 'list' }">
        <view v-if="list.length !== 0">
          <view v-for="(item, index) in list" :key="item.id">
            <!--判断题-->
            <BooleanQuestion v-if="item.type === '0101'" :key="item.id" :item="item" :answerNumber="index + 1" disabled>
            </BooleanQuestion>
            <!--单选题-->
            <RadioQuestion v-if="item.type === '0201'" :key="item.id" :item="item" :answerNumber="index + 1" disabled>
            </RadioQuestion>
            <!--多选题-->
            <MultipleQuestion v-if="item.type === '0301'" :key="item.id" :item="item" :answerNumber="index + 1" disabled>
            </MultipleQuestion>
            <!--描述题-->
            <DescribeQuestion v-if="['si02', 'si02', 'si03', 'si04'].includes(item.type)" :key="item.id" :item="item"
              :answerNumber="index + 1" disabled></DescribeQuestion>
          </view>
        </view>
        <view v-else style="padding-top: 30%;">
          <Empty></Empty>
        </view>
      </view>
      <!--切换用户试卷-->
      <view class="btn-item flex">
        <text class="prev f_1" @click="prev">上一位</text>
        <text class="next f_1" @click="next">下一位</text>
      </view>
      <!--导航、回到顶部功能菜单-->
      <view class="nav-btn flex flex-column" v-if="list.length">
        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/answer/top.png" class="top"
          v-show="scrollTop > windowHeight / 2" @click="scrollToTop" />
        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/answer/nav.png" class="nav"
          v-if="navbarVal !== 4" @click="openAnswerNav" />
      </view>
      <AnswerNav :nav-list="list" :answer-data="answerData" :currentIndex="0" ref="AnswerNav"
        @navItemClick="navItemClick"></AnswerNav>
    </view>
  </template>
  
  <script>
  import RadioQuestion from "@/improve/components/answer/question/RadioQuestion.vue";
  import DescribeQuestion from "@/improve/components/answer/question/DescribeQuestion.vue";
  import BooleanQuestion from "@/improve/components/answer/question/BooleanQuestion.vue"; 
  import MultipleQuestion from "@/improve/components/answer/question/MultipleQuestion.vue";
  import AnswerNav from "@/improve/components/answer/AnswerNav.vue";
  import Empty from "@/improve/components/common/Empty.vue";
  import { listUpgPracticeScoreResultItem, getUpgPracticeScoreResult, listUpgPracticeScoreResultItemByPracticeUuid } from '@/improve/services'
  
  export default {
    name: "answerDetails",
    components: {
      AnswerNav, MultipleQuestion, BooleanQuestion, DescribeQuestion, RadioQuestion, Empty
    },
    data() {
      return {
        isHistory: false,
        upgPracticeJoinUuid: "",
        upgPracticeUuid: '',
        practiceType: "1",//练测类型
        from: "",  //list:列表进入 可以切换上一个下一个  one:成绩查询进入只是查询当前记录（practiceView页进入）
        list: [],
        currentIndex: 0,
        scrollTop: 0, //滚动距离
        windowHeight: 0,
        userPracticeInfo: null,
        checkIndex: 0,
        date: '',
        bhCheckUuid: '',
        bhCheckUuidList: [],
        userPerformanceList: [],
        practiceUuid: '',
      }
    },
    computed: {
      answerData() {
        const obj = {
          total: 0, //总数
          isCollect: false, //是否收藏
          collectTotal: 0,//收藏个数
          successTotal: 0, //答对数量
          errorTotal: 0, //打错数量
        }
        if (this.list.length) {
          obj.successTotal = this.list.filter((item) => item?.correct)?.length
          obj.errorTotal = this.list.filter((item) => !item?.correct)?.length
          obj.collectTotal = this.list.filter((item) => !item?.isCollect)?.length
          obj.total = this.list.length
        }
        return obj
      }
    },
    created() {
      this.list.forEach((item) => {
        if (item.selections) {
          try {
            item.selections = JSON.parse(item.selections)
          } catch (e) {
  
          }
        }
      })
    },
    methods: {
      // 获取历史练习-排行榜
      async getUpgPracticeScoreResult() {
        const data = await getUpgPracticeScoreResult({ upgPracticeJoinUuid: this.upgPracticeJoinUuid, type: this.practiceType, desc: true, headerType: 4 })
        this.bhCheckUuidList = data.map(i => i.bhCheckUuid)
      },
      // 获取历史练习答题详情 - 每日一练
      async listUpgPracticeScoreResultItem() {
        const data = await listUpgPracticeScoreResultItem({ bhCheckUuid: this.bhCheckUuid })
        this.list = data.map(i => ({
          ...i,
          stuAnswer: i.stuAnswer ? i.stuAnswer : '未答题',
          score: i.score ? i.score : 0,
          stuScore: i.stuScore ? i.stuScore : 0,
          selections: JSON.parse(i.selections),
        }))
      },
      // 获取历史练习答题详情 - 在线练测
      async listUpgPracticeScoreResultItemByPracticeUuid() {
        const data = await listUpgPracticeScoreResultItemByPracticeUuid({ practiceUuid: this.bhCheckUuid })
        this.list = data.map(i => ({
          ...i,
          stuAnswer: i.stuAnswer ? i.stuAnswer : '未答题',
          score: i.score ? i.score : 0,
          stuScore: i.stuScore ? i.stuScore : 0,
          selections: JSON.parse(i.selections),
        }))
      },
      //打开导航弹窗
      openAnswerNav() {
        this.$refs.AnswerNav.open();
      },
      //题目导航定位
      navItemClick(index) {
        if (index !== -1) {
          // 从数组中移除该元素
          const [targetElement] = this.list.splice(index, 1);
          // 将元素插入到数组的第一位
          this.list.splice(0, 0, targetElement);
          this.$refs.AnswerNav.close();
          this.scrollToTop()
        }
      },
      scrollToTop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      //上一位
      prev() {
        if (this.checkIndex <= 0) {
          uni.showToast({
            title: '已经是第一位了',
            icon: 'none'
          })
          return
        }
        this.checkIndex--
        this.bhCheckUuid = this.bhCheckUuidList[this.checkIndex]
        this.listUpgPracticeScoreResultItem()
      },
      //下一位
      next() {
        if (this.checkIndex >= this.bhCheckUuidList.length - 1) {
          uni.showToast({
            title: '已经是最后一位了',
            icon: 'none'
          })
          return
        }
        this.checkIndex++
        this.bhCheckUuid = this.bhCheckUuidList[this.checkIndex]
        this.listUpgPracticeScoreResultItem()
      },
    },
    onLoad(options) {
      this.upgPracticeJoinUuid = options.upgPracticeJoinUuid
      
      this.checkIndex = options.checkIndex
      this.practiceType = options.practiceType ? options.practiceType : '1'

      if(this.practiceType != '2') {
        this.bhCheckUuid = options.bhCheckUuid
        this.getUpgPracticeScoreResult()
        this.listUpgPracticeScoreResultItem()
      }
      if(this.practiceType == '2') {
        this.practiceUuid = options.practiceUuid
        this.listUpgPracticeScoreResultItemByPracticeUuid()
        this.getUpgPracticeScoreResult()
      }

      uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight
        }
      })
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    }
  }
  </script>
  
  <style scoped lang="scss">
  .answerDetails {
    height: 100vh;
    width: 100vw;
    padding-top: 10px;
    box-sizing: border-box;
    background-color: #FFFFFF;
  
  
    .line {
      width: 100%;
      background-color: #F5F5F5;
    }
  
  
    .content {
      background-color: #FFFFFF;
      border-top-left-radius: 24rpx;
      border-top-right-radius: 24rpx;
      position: relative;
      margin-top: -25px;
      padding-bottom: calc(env(safe-area-inset-bottom));
  
  
      .title {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding: 18px;
        border-bottom: solid 1px #F5F5F5;
      }
  
      .navbar {
        padding: 15px;
      }
  
      .is-btn {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
      }
  
      .list-view {
        background-color: #FFFFFF;
        padding-top: 1px;
        box-sizing: border-box;
      }
    }
  
    .btn-item {
      padding-top: 10px;
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
      position: fixed;
      background-color: #FFFFFF;
      box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
      bottom: 0;
      width: calc(100% - 40px);
      z-index: 99;
      padding-left: 20px;
      padding-right: 20px;
  
  
      .next,
      .prev {
        border-radius: 12px;
        text-align: center;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
      }
  
      .next {
        margin-left: 20px;
        background-color: #37B874;
        color: #FFFFFF;
  
      }
  
      .prev {
        margin-left: 20px;
        background-color: #FFFFFF;
        color: #37B874;
      }
  
    }
  
    .nav-btn {
      position: fixed;
      right: 0;
      bottom: 100px;
  
      image {
        width: 50px;
        height: 50px;
      }
    }
  }
  </style>